<template>
  <div>
    <el-tabs v-model="activeName"  @tab-change="tabChange">
      <el-tab-pane label="数学" name="Math">
        <Math/>
      </el-tab-pane>
      <el-tab-pane label="拼音" name="PinYin">
        <PinYin/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref} from "vue"
import { pinyin } from "pinyin-pro"
import type {TabPaneName} from "element-plus"
import Math from "@/views/topic/math.vue"
import PinYin from "@/views/topic/pinyin.vue"

const activeName = ref('Math')

const tabChange = (name: TabPaneName)=>{
  console.log(name)
}

const pinyinStr = ref('')

const pinyinMode = ()=>{
  pinyinStr.value =  pinyin("汉语拼音")
}
pinyinMode()


</script>

<style scoped>
.math-cell{
  text-align: center;
  min-width: 30px;
}
</style>
